<template>
  <div>
	  
	<el-row type="flex" justify="center">
					
			<div>
				
				<el-form ref="form" :model="form" label-width="120px">
				  <el-form-item label="车位号">
				    <el-input v-model="form.id" disabled></el-input>
				  </el-form-item>
				  <el-form-item label="停车区域" style="text-align: left;"> {{form.address}}</el-form-item>
				  
				  <el-form-item label="当前的车位状态" style="text-align: left;">{{form.state}}</el-form-item>
				  
				  <el-form-item label="一天价格" style="text-align: left;">{{form.price}}</el-form-item>
				  
				  <el-form-item label="车位号">
				   <el-input-number v-model="duration" @change="handleChange" :min="1" :max="10"></el-input-number>
				  </el-form-item>
				  
				 <!-- <el-form-item label="停车的时长">
				    <el-input v-model="duration" @blur="math"></el-input>
				  </el-form-item> -->
				  
				  <!-- v-model="money" -->
				  <el-form-item label="总计金额" style="text-align: left;">{{money}}</el-form-item>
				  
				  <el-form-item>
				    <el-button type="primary" @click="onSubmit">立即创建</el-button>
				    <!-- <el-button>取消</el-button> -->
				  </el-form-item>
				</el-form>
				
			</div>
	 
	</el-row>
	
  </div>
  
</template>

<script>
	
export default {
    data() {
      return {
		date: 1,
		money: '',
		duration:'1',
        form: {
          // id: '1',
          id:'',
          address:'',
          state: '',
		  price:'', 
        }
      }
    },
    methods: {
      onSubmit() { 
		  var date=this.duration
		  var money=date*this.form.price
		  
		  this.money=money
		  
		  this.$axios({
			  // 默认请求方式为get
			  method: 'post',
			  url: "/Park/ParkingOrder",
			  // 传递参数
			  data: {
				  id:'1',
				  number: this.form.id,
				  address: this.form.address,
				  state:'已使用',
				  price:this.form.price,
				  duration:this.duration,
				  money:this.money,
				  status:'未缴费'
			  },
		  }).then((res) => {
			  // 请求成功
			  alert(res.data.msg)
			  
		  })
		 
		  
	  },
	  Init(){
		  /* 初始化*/
		  this.form=this.$route.query.id;
		  var id=this.$route.query.id;
		  console.log("约吗.....进入到了。充值页面")
		  console.log(id);
	  },
	   handleChange(value) {
		  var date=this.duration
		  var money=date*this.form.price
		  
		  this.money=money
		  console.log(value);
		}
	  
	  
    },
	mounted: function(){
		this.Init();//需要触发的函数
	},
  }
</script>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
	  text-align: center;
    }
  }
  .el-col {
    border-radius: 4px;
  }
 /* .bg-purple-dark {
    background: #99a9bf;
  } */
  .bg-purple {
    background: #d3dce6;
  }
  /* .bg-purple-light {
    background: #e5e9f2;
  } */
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
/*  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  } */
</style>